import React, {Component} from 'react'

export default class ES6Component extends Component{
    // 构造函数
    constructor(props){
        super(props)
        // 1.给组件设置默认状态值
        this.state = {
            count:0
        }
        // this.handleIncrement = this.handleIncrement.bind(this)
    }
    // 组件中必须要有render方法
    render(){
        // console.log('组件正在渲染');
        // render方法中必须要有return语句
        // 有状态的组件中可以使用this.props访问传递进来的属性
        // 3.点击h1的时候，组件state状态中的count自增
        return <h1 ref="txtH1" onClick={this.handleIncrement}>这是ES6Component{this.props.name} - count:{this.state.count}</h1>
    }

    // 2.点击自增的处理函数
    handleIncrement = ()=>{
        this.setState({
            count: ++this.state.count
        });
    }

    // 当窗体伸缩的时候，打印window的宽度
    handleResize = ()=>{
        console.log(window.innerWidth);
    }

    // handleIncrement(){
    //     this.setState({
    //         count: ++this.state.count
    //     });
    // }

    // 设置默认属性
    static defaultProps = {
        name:'888'
    }
    // 设置属性校验，如果传递的prop属性类型不正确，则报警告信息
    static propTypes={
        name:React.PropTypes.string.isRequired
    }

    // 将要被挂载
    componentWillMount(){
        console.log('组件将要被渲染！');
    }

    // 已经挂载
    componentDidMount(){
        console.log('组件已经渲染成功！');
        window.addEventListener('resize', this.handleResize);
    }

    //组件将要被更新，此时元素的内容还没有改变
    componentWillUpdate(props, state){
        console.log('组件将要被更新' + this.state.count);
        console.log(this.refs.txtH1.innerText);
        // console.log(document.getElementById('txtH1').innerText)
    }

    // 组件状态已经被更新，此时组件的内容已经被改变
    componentDidUpdate(props, state){
        console.log('组件已经被更新');
        // console.log(state);
        console.log(this.refs.txtH1.innerText);
    }

    // 组件是否需要更新，
    shouldComponentUpdate(props, state){
        console.log(props); // 本组件最新的属性信息
        console.log(state); // 本组件最新的状态信息
        return state.count%2==0?true:false;
    }
}

export var test = 123;